<template>
  <div class="m-slider">
    <ul class="clear-float" :style="[sliderActive,{'width':sliderImg.length*100+'vw'}]"
    @touchstart="stopSlider($event)" @touchmove="moveSlider($event)" @touchend="endSlider($event)">
      <li class="slider-item" v-for="(item,index) in sliderImg"><img
        :src="item" class="item-img"></li>
    </ul>
    <!--<div class="slider-count">{{ ((nowSlider+1) == bannerList.length) ? (nowSlider+1) : ((nowSlider+1)%bannerList.length) }}/{{bannerList.length}}</div>-->
    <div class="slider-count">{{ getShowSlider }}</div>
    <a href="javascript:;" class="back"></a>
  </div>
</template>

<script>
  export default {
    name: 'm-slider',
    data () {
      return {
        sliderActive:{//定义图片滑动属性
          transform:'translate(-100vw,0)',
          transition:'transform 0.5s'
        },
        myTimer:'',//定义定时器名称，方便删除时使用
        startTouch:'',//保存手指首次在轮播图上的位置（x轴上）
        moveTouch:'',//记录当前手指在x轴的位置
        nowSlider:0,//计数器
        bannerList:[
          'http://zbh-common-public-storage.oss-cn-shanghai.aliyuncs.com/mtdp_interview/2.jpeg',
          'http://zbh-common-public-storage.oss-cn-shanghai.aliyuncs.com/mtdp_interview/3.jpeg',
          'http://zbh-common-public-storage.oss-cn-shanghai.aliyuncs.com/mtdp_interview/4.jpeg'
        ]
      }
    },
    computed:{//computed有缓存的计算
        sliderImg:function(){//在第一张图前面放一张最后一张图，在最后一张图放置第一张图
            let [...saveImg]=this.bannerList;
            let [imgFirst,...others]=this.bannerList;
            saveImg.unshift(others[others.length-1]);
            saveImg.push(imgFirst);
            return saveImg;
        },
      getShowSlider : function () {
        let sliderShow = this.nowSlider +1;
        let bannerLength = this.bannerList.length;

        if(sliderShow == 0){
          sliderShow = bannerLength;
        }
        if(sliderShow != bannerLength){
          sliderShow = sliderShow % bannerLength;
        }
        return sliderShow+'/'+bannerLength;
      }
    },
    mounted(){//生命周期钩子函数，该钩子在服务器端渲染期间不被调用。
      if(this.bannerList&&this.bannerList.length){
          this.myTimer=setInterval(this.sliderStart,3000);
      }
    },
    methods:{
        sliderStart:function () {
          this.nowSlider++;
          this.nowSlider%=this.sliderImg.length;
          if(this.nowSlider===this.bannerList.length){
              setTimeout(() => {
                this.nowSlider=0;
                this.sliderActive={
                  transform:'translate(-100vw,0)'
                }
              },500);

          }
          if(this.nowSlider===-1){
              setTimeout(() => {
                this.nowSlider=this.bannerList.length-1;
                this.sliderActive={
                  transform:`translate(${-100*(this.nowSlider+1)}vw,0)`
                }
              },500);
          }
          this.sliderActive={
            transition:'transform 0.5s',
            transform:`translate(${-100*(this.nowSlider+1)}vw,0)`
          }
        },
        stopSlider:function(e){//手指触碰到图片但不移动时结束轮播效果
          if(e.target != e.currentTarget){
            clearInterval(this.myTimer);
            delete this.sliderActive['transition'];//关闭css3过渡效果
            this.startTouch=e.targetTouches[0].clientX;//targetTouches当前dom元素上手指的列表
          }
        },
        moveSlider:function(e){//计算手指在轮播图上滑动的距离
          if(e.target != e.currentTarget){
            this.moveTouch=e.targetTouches[0].clientX;
            let slideDir=this.moveTouch-this.startTouch;
            let targetWidth=parseInt(window.getComputedStyle(e.target).width);
            let tranDir;
            if(slideDir<-25||slideDir>25){//预防触摸时图片突然闪动
              if(slideDir<0){
                slideDir-=25;
              }else if(slideDir>0){
                slideDir+=25;
              }
              tranDir=-targetWidth*(this.nowSlider+1)+slideDir;//触摸时图片随手指移动，距离须减去当前图片宽度乘以当前滚动索引
              this.sliderActive.transform=`translate(${tranDir}px,0)`;
            }
          }
        },
        endSlider:function(e){//根据滑动的距离在结束触摸时移动图片
          if(e.target != e.currentTarget){
            let slideDir=this.moveTouch-this.startTouch;
            let targetWidth=parseInt(window.getComputedStyle(e.target).width);
            if(slideDir<0 && slideDir<-targetWidth/3){
              this.nowSlider++;
            }else if(slideDir>0 && slideDir>targetWidth/3){
              this.nowSlider--;
            }
            this.nowSlider--;
            this.sliderStart();
            this.moveTouch=0;
            this.startTouch=0;
            this.myTimer=setInterval(this.sliderStart,3000);
          }
        }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .m-slider{
    width: 100%;
    height: 56vw;
    overflow: hidden;
    position: relative;
  }
  .slider-count{
    position: absolute;
    right: 0.3rem;
    bottom: 0.3rem;
    width: 0.52rem;
    height: 0.52rem;
    line-height: 0.52rem;
    z-index: 999;
    font-size: 0.28rem;
    text-align: center;
    border-radius: 0.28rem;
    color: #E1E1E1;
    background-color: rgba(0,0,0,0.7);
  }
  .m-slider ul{
    font-size: 0;
    overflow: hidden;
  }
  li{
    width: 100vw;
    float: left;
  }
  .item-img{
    width: 100%;
  }
  a{
    /*计算rem值，用设计稿的pt*4得到px值再除以100*/
    width: 0.22rem;
    height: 0.4rem;
    position: absolute;
    left: 0.28rem;
    top:0.64rem;
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 1),
  only screen and (min--moz-device-pixel-ratio: 1),
  only screen and (-o-min-device-pixel-ratio: 1/1),
  only screen and (min-device-pixel-ratio: 1){
    .slider-item1{
      background-image: url("../../assets/image/Mask.png");
      background-size: cover;
      background-repeat: no-repeat;

    }
    .back{
      background-image: url("../../assets/image/back.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 3/2),
  only screen and (min-device-pixel-ratio: 1.5){
    .slider-item1{
      background-image: url("../../assets/image/Mask@2x.png");
      background-size: cover;
      background-repeat: no-repeat;

    }
    .back{
      background-image: url("../../assets/image/back@2x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
  @media only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (min--moz-device-pixel-ratio: 2),
  only screen and (-o-min-device-pixel-ratio: 2/1),
  only screen and (min-device-pixel-ratio: 2){
    .slider-item1{
      background-image: url("../../assets/image/Mask@3x.png");
      background-size: cover;
      background-repeat: no-repeat;

    }
    .back{
      background-image: url("../../assets/image/back@3x.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
</style>
